<template>
  <div class="container">
    <div class="header">产量时推移</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import commomOption from './commomOption.ts'
import * as echarts from 'echarts'

const option = {
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    left: 60,
    right: 60,
    top: 40,
    bottom: 40,
  },
  xAxis: Object.assign({}, commomOption.xAxis, {
    data: ['1', '2', '3', '4', '5', '6', '7'],
  }),
  yAxis: commomOption.yAxis,
  series: [
    {
      data: [50, 30, 24, 18, 35, 47, 160],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#89C1EC',
        borderColor: 'rgba(32, 255, 231, 1)',
      },
      lineStyle: {
        width: 3,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(32, 255, 231, 0.6)',
          },
          {
            offset: 1,
            color: 'rgba(37, 188, 201, 0.06)',
          },
        ]),
      },
    },
    {
      name: 'bar',
      type: 'bar',
      barWidth: 15,
      itemStyle: {
        normal: {
          barBorderRadius: [15, 15, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(85, 147, 187, 1)' },
            { offset: 1, color: 'rgba(12, 122, 234, 1)' }
          ])
        }
      },
      data: [80, 136, 38, 46, 15, 79, 95]
    },
  ],
}

// 在Vue3中，getCurrentInstance()可以用来获取当前组件实例
const { proxy } = getCurrentInstance()
// 获取echart挂载的DOM节点
const echartsBox = ref()
// echartsf弹窗出现
function echartInit() {
  //nextTick后再调用，不然会报错
  nextTick(() => {
    // echarts初始化
    let myChart = proxy.$echarts.init(echartsBox.value)

    option && myChart.setOption(option)

    // 根据页面大小自动响应图表大小
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  })
}
echartInit()
</script>
<style lang="less" scoped>
@import url(./container.less);

.container {
  .header {
    // padding-top: 23px;
  }
}
</style>
